<template>
	<view class="weeklyTasks">
		<view class="weeklyTasks-title">
			完成任务领<text>10</text>元红包
		</view>
		<view class="weeklyTasks-content">
			<view class="weeklyTasks-content-title">
				<view @click="toMissionDetails">查看我的周任务</view>
				<view>立即参与租号</view>
			</view>
			<view class="weeklyTasks-content-list">
				<view class="weeklyTasks-content-list-title">
                     参与租号侠“周任务”活动，每周领取<text>红包</text>奖励，越租越实惠，赶紧喊小伙伴一起参与吧
				</view>
				<view class="weeklyTasks-content-item">
					<view class="weeklyTasks-content-item-box" v-for="(item,i) in 5" :key="i">
						<view class="weeklyTasks-content-item-image">
							<image src="/static/week/hongbao.png" mode=""></image>
							<view class="money">
								10<text>元</text>
							</view>
						</view>
						<view class="weeklyTasks-content-item-text">
							<view>累计周租≥3单</view>
							<view>且完单金额≥10元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="lucky">
				<view class="lucky-title">
					<view></view>
					<view>
						<image src="/static/week/xunyuncanyu.png" mode=""></image>
					</view>
					<view></view>
				</view>
				<view class="lucky-list">
					<!-- <view class="share-swiper">
						<view class="page-section swiper">
							<view class="page-section-spacing">
								<swiper class="swiper" :disable-touch="true" :indicator-dots="indicatorDots" :vertical="true" :autoplay="true"
								 :interval="interval" :duration="duration" :circular="true" v-for="(item,i) in 8" :key="i">
									<swiper-item v-for="(item,i) in noticeList" :key="i">
										
									</swiper-item>
								</swiper>
							</view>
						</view>
					</view> -->
					<scroll-view scroll-y="true" style="height: 100%;"  scroll-with-animation="true" :scroll-top="scroll" @scrolltolower="scrolltolower">
						<view v-for="(item,i) in noticeList" :key="i" @touchmove.stop.prevent="" class="sc">
							<text>{{item.name}}</text>
							<text>{{item.money}}</text>
						</view>
					</scroll-view>
					<view class="zzc">
						
					</view>
				</view>
			</view>
			<view class="lucky" style="margin-bottom: 50rpx;">
				<view class="lucky-title">
					<view></view>
					<view>
						<image src="/static/week/huidongguize.png" mode=""></image>
					</view>
					<view></view>
				</view>
				<view class="lucky-list-rlue">
					<view class="lucky-list-rlue-ds">
						<view>
							1.
						</view>
						<view class="">
							活动时间：即日起凡租号侠用户，每周（<text class="color">自然周</text>）每人累计完成租号订单达到指定标准，即可领取周任务活动红包
						</view>
					</view>
					<view class="lucky-list-rlue-ds">
						<view class="lucky-list-rlue-two">
							2.
						</view>
						<view>
							<view class="lucky-list-rlue-two">
								红包发放规则：
							</view>
							<view >
								一级：周租<text class="color">3单</text>，且订单金额<text class="color">≥10元</text>即可获得<text class="color">2元</text>租号红包
							</view>	
						</view>
					</view>
					<view class="lucky-list-rlue-ds lucky-list-rlue-two">
						<view>
							3.
						</view>
						<view class="">
							每个自然周结束后，达成用户将收到<text class="color">短信提醒</text>，请确保通讯畅通，红包领取有效期为任务达成后的<text class="color">一周内</text>	
						</view>
					</view>
					<view class="lucky-list-rlue-ds lucky-list-rlue-two">
						<view>
							4.
						</view>
						<view class="">
							不同周期内，用户可重复参加
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import
	export default{
		data(){
			return{
				indicatorDots: false,
				interval: 3000,
				duration: 1000,
				noticeList:[
					{name:"用户184****1576已参与并成功领取",money:"8元红包"},
					{name:"用户184****1576已参与并成功领取",money:"2元红包"},
					{name:"用户184****1576已参与并成功领取",money:"8元红包"},
					{name:"用户184****1576已参与并成功领取",money:"8元红包"},
					{name:"用户184****1576已参与并成功领取",money:"3元红包"},
					{name:"用户184****1576已参与并成功领取",money:"8元红包"},
					{name:"用户184****1576已参与并成功领取",money:"2元红包"},
					{name:"用户184****1576已参与并成功领取",money:"8元红包"},
					{name:"用户184****1576已参与并成功领取",money:"8元红包"},
					{name:"用户184****1576已参与并成功领取",money:"8元红包"},
				],
				copyList:[],// 拷贝
				scroll:0,
				height:30,
				times:null,
			}
		},
		onLoad(){
			// this.copyList = JSON.parse((JSON.stringify(this.noticeList)))
			// this.time()
		},
		onHide() {
			clearInterval(this.times)
		},
		onShow() {
			this.copyList = JSON.parse((JSON.stringify(this.noticeList)))
			this.time()
		},
		onReady() {
			let query = uni.createSelectorQuery().in(this);
			query.select('.sc').boundingClientRect(data => {
				this.height = data.height
			}).exec();
		},
		methods:{
			time(e){
				this.times = setInterval(()=>{
					this.scroll = this.scroll + this.height
				},1000)
				
			},
			toMissionDetails(){
				uni.navigateTo({
					url:'/pages/activitys/weeklyTasks/missionDetails'
				})
			},
			scrolltolower(){
				if(this.noticeList.length > 80){
					this.noticeList = this.noticeList.slice(1,20)
				}
				this.copyList.forEach((item)=>{
					this.noticeList.push(item)
				})
			},
			onBackPress(){
				clearInterval(this.times)
			}
			
		}
	}
</script>

<style>
	page{
		background: url(/static/week/beijing.png);
		background-size:cover;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
	}
	.weeklyTasks{
		padding-top: 380rpx;
	}
	.weeklyTasks-title{
		height: 70rpx;
		background: url(/static/week/btn.png);
		background-size: 100%;
		margin: 0 116rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 38rpx;
	}
	.weeklyTasks-title text{
		color: #f55b45;
		font-weight: bold;
	}
	.weeklyTasks-content{
		padding: 0 30rpx;
		margin-top: 665rpx;
	}
	.weeklyTasks-content-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.weeklyTasks-content-title view{
		width: 300rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 38rpx;
	}
	.weeklyTasks-content-title view:nth-child(1){
		background: url(/static/week/chakanrenwu.png);
		background-size: 100%;
	}
	.weeklyTasks-content-title view:nth-child(2){
		background: url(/static/week/canyu.png);
		background-size: 100%;
		color: #FF2E2E;
		
	}
	.weeklyTasks-content-list{
		margin-top: 48rpx;
		padding: 30rpx 0;
		border-radius: 20rpx;
		background: rgba(80,36,123,.2);
	}
	.weeklyTasks-content-list-title{
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
	}
	.weeklyTasks-content-list-title text{
		color: #F5CC45;
	}
	.weeklyTasks-content-item{
		display: flex;
		flex-wrap: wrap;
		/* justify-content: center; */
		align-items: center;
	}
	.weeklyTasks-content-item-box{
		width: 214rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 24rpx;
		margin-left: 14rpx;
	}
	.weeklyTasks-content-item-image{
		width: 102rpx;
		height: 140rpx;
		position: relative;
	}
	.weeklyTasks-content-item-image image{
		height: 100%;
		width: 100%;
	}
	.weeklyTasks-content-item-text{
		color: #E9E9E9;
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.weeklyTasks-content-item-text view{
		text-align: center;
		word-break: break-all;
	}
	.money{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10rpx;
		margin: auto;
		color: #FEEC7B;
		font-size: 40rpx;
		text-align: center;
	}
	.money text{
		font-size: 24rpx;
	}
	.lucky-title{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
	}
	.lucky-title view:nth-child(1){
		height: 1rpx;
		width: 110rpx;
		background: #FFFFFF;
		margin-right: 20rpx;
	}
	.lucky-title view:nth-child(3){
		height: 1rpx;
		width: 110rpx;
		background: #FFFFFF;
		margin-left: 20rpx;
	}
	.lucky-title view{
		height: 46rpx;
		width: 200rpx;
	}
	.lucky-title view image{
		height: 100%;
		width: 100%;
	}
	.lucky-list{
		margin-top: 48rpx;
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
		background: rgba(80,36,123,.2);
		height: 690rpx;
		/* display: flex;
		justify-content: space-between; */
		position: relative;
	}
	.lucky-list text{
		font-size: 32rpx;
	}
	.lucky-list text:nth-child(1){
		color: #FFFFFF;
	}
	.lucky-list text:nth-child(2){
		color: #FEEC7B;
	}
	.color{
		color: #FEEC7B;
	}
	.lucky-list-rlue{
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 48rpx;
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
		background: rgba(80,36,123,.2);
	}
	.lucky-list-rlue-two{
		margin-top: 20rpx;
	}
	.lucky-list-rlue-ds{
		display: flex;
	}
	.sc{
		height: 80rpx;
		line-height: 80rpx;
	}
	.zzc{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}
</style>
